<template lang="pug">
.page
  .CustomerSalaryDetail
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="customerSalaryTable" @on-selection-change="handleOnSelectChange")
        .clearfix.font-16(slot="header")
          .table-title-lefttxt.pull-left
            |合计
            span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
            |条
          .pull-right.table-title-btns
            Button.mr-10(type="info" @click="handleShowCreateTreatmentAppendixModal(id,whetherDifferentiateCities)") 新增
            Button.mr-10(type="warning" @click="isDeleteModal()" :disabled="!selectedIdArr.length > 0") 删除
        template(slot-scope="{ row, index }" slot="action")
          Poptip(trigger="hover" title="合同附件" :disabled="row.fileList.length == 0")
            div(slot="content" style='z-index:999;')
              div.pop-item(v-for="(item, index) in row.fileList" :key="index")
                div.u-d-info(@click="handleDownLoad(item)") {{item.name}}
                Icon(type="ios-close-circle-outline" @click="isDeleteModal(item)")
            Button(:disabled="row.fileList.length == 0") 查看
        .clearfix.pl-20.pr-20(slot="footer")
          Page(
            :current="tableComone.pageIndex"
            :total="tableComone.totalRows"
            @on-change="onChangePage"
            @on-page-size-change="onpageSizeChange"
            show-sizer
            show-total
            placement="top"
            prev-text="上一页"
            next-text="下一页"
            :page-size-opts="[10, 20, 30, 50, 100]"
          )
    CreateTreatmentAppendixModal(ref="CreateTreatmentAppendixModal" @handleSave="searchFn" :areaArr="areaArr")
</template>

<script>
import { SysInitCustomerSalaryDetailApi } from '@/api/SysInitCustomerSalaryDetail.api.js'
import { EmployeeSalaryApi } from '@/api/EmployeeSalary.api.js'
import { Common } from '@/utils/common.js'
import { attachmentsThead } from './CStableHead.js'
import _cloneDeep from 'clone-deep'
import CreateTreatmentAppendixModal from './modal/CreateTreatmentAppendixModal.vue'
import dataApi from '@/api/data.js'
import { TreatmentBasicsTypeApi } from '@/api/TreatmentBasicsType.api.js'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
export default {
  name: 'TreatmentParamManageDetail',
  components: {
    CreateTreatmentAppendixModal
  },

  data () {
    return {
      salaryId: '',
      salaryMonth: '',
      thead: _cloneDeep(attachmentsThead),
      tableData: [],
      areaArr: [],
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 10 // 当前页面展示条数
      },
      selectedId: '', // 勾选的id集合
      selectedIdArr: [], // 勾选的id, name数组集合
      formData: {
        name: '',
        month: ''
      },
      downLoadUrl: '',
      whetherDifferentiateCities: 0
    }
  },

  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 编辑
    hasView () {
      return this.actionArr.indexOf('View') > -1
    },
    // 附件新增
    hasSaveTreatmentBasicsCitys () {
      return this.actionArr.indexOf('SaveTreatmentBasicsCitys') > -1
    },
    // 附件查看
    hasGetBasicsTypeAnnexList () {
      return this.actionArr.indexOf('GetBasicsTypeAnnexList') > -1
    },
    // 附件下载
    hasTreatmentDownLoadAnnex () {
      return this.actionArr.indexOf('TreatmentDownLoadAnnex') > -1
    },
    // 删除附件
    hasTreatmentDeleteAnnex () {
      return this.actionArr.indexOf('TreatmentDeleteAnnex') > -1
    },
    
  },
  watch: {
  },

  mounted () {
    this.id = this.$route.query.id
    this.whetherDifferentiateCities = this.$route.query.whetherDifferentiateCities
    this.query()
    this.getProvince()
  },

  methods: {
    getProvince () {
      dataApi.getProvince().then(res => {
        this.areaArr = res.data.data.map(item => {
          return {
            ...item,
            label: item.name,
            value: item.id,
            children: [],
            loading: false
          }
        })
      })
    },
    // 是否删除前询问
    isDeleteModal (obj) {
      this.$Modal.confirm({
        title: '是否确认删除该条信息',
        onOk: () => {
          if(obj) {
            this.fjhandleDelete(obj)
          }else{
            this.handleDelete()
          }
        }
      })
    },
    //删除附件
    async fjhandleDelete (obj) {
      console.log(this.selectedId)
      let res = await TreatmentBasicsTypeApi.treatmentDeleteAnnex({
        id: obj.id
      })
      if (res.data.success) {
        this.$Message.success(res.data.message)
        this.selectedIdArr = []
        this.query()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },
    // 删除
    async handleDelete () {
      console.log(this.selectedId)
      let res = await TreatmentBasicsTypeApi.deleteTreatmentBasicsCitys({
        id: this.selectedId
      })
      if (res.data.success) {
        this.$Message.success(res.data.message)
        this.selectedIdArr = []
        this.query()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },
    // 附件下载
    handleDownLoad (row) {
      var url = baseUrl + '/Attachment/Download?id=' + row.id
      window.open(url, '_blank')
    },
    // 显示新增弹窗
    handleShowCreateTreatmentAppendixModal (id,whetherDifferentiateCities) {
      // this.$refs.CreateTreatmentAppendixModal.isShowCreateTreatmentAppendixModal = true
      this.$refs.CreateTreatmentAppendixModal.isCreate = true
      this.$refs.CreateTreatmentAppendixModal.show()
      console.log(whetherDifferentiateCities,'whetherDifferentiateCities')
      this.$refs.CreateTreatmentAppendixModal.formCreate.areaId = ''
      if (whetherDifferentiateCities == 0) {
        this.$refs.CreateTreatmentAppendixModal.rules.costomerCity_arr = [{ required: false}]
      } else {
        this.$refs.CreateTreatmentAppendixModal.rules.costomerCity_arr = [{ required: true, type: 'array', min: 1, message: '请选择地址', trigger: 'change' }]
      }
      this.$refs.CreateTreatmentAppendixModal.whetherDifferentiateCities = whetherDifferentiateCities
      console.log(this.$refs.CreateTreatmentAppendixModal.rules)
      this.$refs.CreateTreatmentAppendixModal.formCreate.TreatmentTypeId = id.toUpperCase()
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedIdArr = value.map((item) => {
        return { id: item.id, name: item.name }
      })
      let arr = value.map((item) => {
        return item.id
      })
      this.selectedId = arr.join(',')
      console.log('列表勾选数组', this.selectedIdArr)
      console.log('列表勾选数组字符串', this.selectedId)
    },
    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },

    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      var params = {
        TreatmentTypeId: this.id,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }
      let res = await TreatmentBasicsTypeApi.getBasicsTypeAnnexList(params)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows
        let result = res.data.data
        for (var j in result) {
          let annexNameArr = result[j].attachmentName?result[j].attachmentName.split(','):result[j].attachmentName
          let pathArr = result[j].attachmentPath?result[j].attachmentPath.split(','):result[j].attachmentPath
          let idArr = result[j].attachmentFullID?result[j].attachmentFullID.split(','):result[j].attachmentFullID
            let fileList = []
            for (var i in pathArr) {
              fileList[i]={
                path: pathArr[i],
                name: annexNameArr[i],
                id: idArr[i]
              }
            }
            result[j].fileList = fileList
          }
      } else {
        this.tableData = []
      }
      this.loading = false
    },
  }
}
</script>

<style lang="less">
  .pop-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    Icon{
      color: #5C6B77;
    }
  }
</style>
